<template>
  <div>
      <!-- 1.0 头部导航结构 -->
      <van-nav-bar
        title="精彩跟帖"
        left-arrow
        @click-left="$router.back()"
        @click-right="$router.push({ path: '/' })"
      ></van-nav-bar>
       <!-- 2.0 评论列表 -->
       <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
        <van-list 
           class="list" 
           v-model="loading"
           :finished="finished"
           finished-text="没有更多了"
           @load="onLoad"
        >
      <div
        class="item"
        v-for="item in commentList"
        :key="item.id"
      >
       <!-- 2.1 评论头部 - 用户信息 -->
        <div class="item-header">
          <van-image
            round
            class="avatar"
            :src='item.user.head_img |imgUrl'
          />
          <div class="info">
            <p class="username">{{ item.user.nickname }}</p>
            <p class="date">{{ item.create_date|formatDate }}</p>
          </div>
          <span class="reply" @click="reply(item)">回复</span>
        </div>
        <!-- 🔔 2.2 父评论内容 - 被回复的评论  -->
        <MyContent v-if="item.parent" :parent="item.parent" @parentReply="reply"></MyContent>
        <!-- 2.3 评论底部 - 评论内容 -->
        <div class="item-footer">
          <p class="content">{{ item.content }}</p>
        </div>
      </div>
       <van-empty
        v-if="!commentList.length"
        description="空空如也"
      />
        </van-list>
       </van-pull-refresh>
        <!--  -->
        <Mycomment 
          :article="article" 
          @update="updateFn" 
          ref="Mycomment" 
          @reset="temp=null" 
          :commentObj="temp"
          >
         </Mycomment>
  </div>
</template>

<script>
import {getPostCommentByIdAPI,getPostDetailByIdAPI} from '../apis/news'
import MyContent from '../components/MyContent.vue'
import Mycomment from '../components/Mycomment.vue'
export default {
   data () {
       return {
           id:this.$route.params.id,
           commentList: [],
           article:{},
           // 1. temp 为 null 表示回复的是文章，2. 传入评论对象表示回复某个人
           temp:null,
           pageIndex:1,
           pageSize:10,
           finished:false,
           loading:false,
           refreshing:false,
       }
   },
   components: {
       MyContent,
       Mycomment,
   },
   async created () {
    //    console.log(id)
    //    const res = await getPostCommentByIdAPI(this.id)
    //    console.log(res)
    //    this.commentList=res.data.data
    this.getCommentData()
       const res2=await getPostDetailByIdAPI(this.id)
       console.log(res2)
       this.article=res2.data.data
   },
   methods:{
         // 下拉刷新时触发的函数
     async onRefresh(){
        console.log("下拉刷新动画效果");
        // 页码重置
        this.pageIndex=1;
        // 重置数组
        this.commentList=[];
        // 隐藏没有更多了的提示 可以继续分页加载
        this.finished=false;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading=true;
        await this.getCommentData();
        this.refreshing=false;
     },
     onLoad(){
       this.pageIndex++;
       this.getCommentData();
     },
       async getCommentData() {
         // 获取文章 id， id为1的文章有一些的评论数据。
         // console.log(id);
         // 根据文章 id 获取文章的评论列表
         const res = await getPostCommentByIdAPI(this.id,{
           pageIndex:this.pageIndex,
           pageSize:this.pageSize,
         });
         if(res.data.data.length===0){
           this.finished=true;
           return;
         }
         // console.log(res);
               // 分页是追加数据到原数组中
         this.commentList.push(...res.data.data)
         this.loading=false
       },
       updateFn(){
           this.getCommentData()
                 // 💥 因为有分页，重置所有数据
           this.onRefresh();
           // 平滑滚动 - 手机端可用
           window.scrollTo({ top: 0, behavior: "smooth" });
           this.temp=null;
       },
       reply(item){
            console.log(11, item)
            // 🔔 通过 ref 找到组件实例，调用组件内的方法实现展示文本域
            this.$refs.Mycomment.inputFn();
            // 把当前评论对象传递给底部评论组件内
            this.temp=item;
       }
   }
}
</script>

<style lang="less" scoped>

.list {
  .item {
    border-bottom: 1px solid #ddd;
    padding: 10px;
    .item-header {
      display: flex;
      .avatar {
        width: 50px;
        height: 50px;
        margin-right: 10px;
      }
      .info {
        flex: 1;
        .username {
          font-size: 16px;
        }

        .date {
          font-size: 13px;
          color: #666;
          .item-footer {
      .content {
        margin: 10px 0;
      }
    }
        }
      }
    }

    .reply {
      font-size: 14px;
      color: #f00;
      position: relative;
      z-index: 10;
    }

    
  }
}

</style>